import { Card } from 'antd';
import { useState, useEffect, useRef } from 'react'
import * as echarts from 'echarts';
import { getOption } from './echartsOptions';
import wxhxpPng from '../images/危险化学品.png'
import SouyeApi from '../../../../../../utils/apis/SouyeApi';
export default function Wxhxp(props) {
    const chartRef = useRef();
    const [data, setData] = useState([])
    const [cztzl, setCztzl] = useState("危险化学品")
    useEffect(() => {
        SouyeApi.cztzl_find(cztzl).then(resp => {
            setDatas(resp.data.map(e => {
                const a = {}
                a.name = e.cztxl
                a.value = e.count
                a.cztxl = e.cztxl
                return a
            }))

        })
    }, [cztzl])

    const [datas, setDatas] = useState([
        {
        name: '化工园区',
        cztxl: '化工园区',
        value: 22
    },
    //  {
    //     name: '危险化学品企业',
    //     cztxl: '危险化学品企业',
    //     value: 13
    // }, 
    {
        name: '加油加气站',
        cztxl: '加油加气站',
        value: 87
    }
])

    useEffect(() => {
        const chart = echarts.init(chartRef.current);
        const option = getOption(datas);
        chart.setOption(option)
    }, [datas])

    return <>
        <Card title={<div className='layout-h center'>
            <img src={wxhxpPng} alt='' style={{
                width: 22,
                marginRight: 8
            }} />
            <div>危险化学品</div>
        </div>} bordered={false} bodyStyle={{
            height: 300
        }}>
            <div className='wh100' ref={chartRef}></div>
        </Card>
    </>;
}